@import "./px2vw";
@import "./common";
header{
    height: vw(124);
    @include head_fixed;
    ul{
        width: vw(750);  //不设置宽度flex没有作用
        height: vw(124);
        line-height: vw(124);
        @include flex_b;
        padding-top: vw(28);
        .back{
            margin-left: vw(23);
            input{
                width: vw(123);
                height: vw(56);
                background-color: #ffffff;
                border: 1px solid #ff9344;
                border-radius: vw(17);
                font-size: vw(26);
            }
        }
        li:nth-of-type(2){
            font-size: vw(26);
        }
        
        select{
            width: vw(163);
            height: vw(60);
            font-size:vw(28);
            color: #000000;
            border-color: #ff9344;
            padding-left: vw(14);
            margin-right: vw(20);
        }
    }
}
.main{
    margin-top: vw(124);
    height: vw(1106);
    .banner{
        @include flex_a;
        width: vw(703);
        height: vw(216);
        margin: 0 auto;
        position: relative;
        li{
            a{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    display: block;
                    width: vw(149);
                    height: vw(149);
                }
                span{
                    font-size: vw(26);
                    color: #000000;
                }
            }
        }
        .dots{
            display: flex;
            flex-direction: row;
            position: absolute;
            bottom: 0;
            span{
                width: vw(18);
                height: vw(18);
                background-color: #ffc9a1;
                border-radius: 50%;
                margin: 0 vw(4);
                &:first-of-type{
                    background-color: #ff9344;
                }
            }
        }
    }
    .list{
        padding: 0 vw(20);
        .food{
            h2{
                @include flex_b;
                padding-top: vw(20);
                .left{
                    display: flex;
                    align-items: center;
                    height: vw(53);
                    line-height: vw(53);
                    img{
                        display: block;
                        width: vw(56);
                        height: vw(44);
                    }
                    span{
                        margin-left: vw(9);
                        font-size: vw(28);
                        color: #000000;
                        font-weight: normal;
                    }
                }
                .right{
                    display: flex;
                    align-items: center;
                    height: vw(53);
                    line-height: vw(53);
                    a{
                        display: inline-block;
                        label{
                            display: inline-block;
                            height: vw(53);
                            display: flex;
                            span{
                                font-size: vw(23);
                                color: #000000;
                                font-weight: normal;
                            }
                            i{
                                margin-left: vw(8);
                                font-size:vw(23);
                                color: #ff9344;
                            }
                        }
                    }
                }
            }
            .pic{
                @include flex_b;
                padding: vw(38) 0 vw(35);
                img{
                    display: block;
                    width: vw(133);
                    height: vw(133);
                }
            }
        }
        .exercise{
            h2{
                @include flex_b;
                padding-top: vw(20);
                .left{
                    display: flex;
                    align-items: flex-end;
                    height: vw(53);
                    line-height: vw(53);
                    img{
                        display: block;
                        width: vw(47);
                        height: vw(58);
                    }
                    span{
                        margin-left: vw(9);
                        font-size: vw(28);
                        color: #000000;
                        font-weight: normal;
                    }
                }
                .right{
                    display: flex;
                    align-items: center;
                    height: vw(53);
                    line-height: vw(53);
                    a{
                        display: inline-block;
                        label{
                            display: inline-block;
                            height: vw(53);
                            display: flex;
                            span{
                                font-size: vw(23);
                                color: #000000;
                                font-weight: normal;
                            }
                            i{
                                margin-left: vw(8);
                                font-size:vw(23);
                                color: #ff9344;
                            }
                        }
                    }
                }
            }
            .pic{
                @include flex_b;
                padding: vw(43) 0 vw(40);
                img{
                    display: block;
                    width: vw(133);
                    height: vw(133);
                }
            }
        }
        .film{
            margin-bottom: vw(12);
            h2{
                @include flex_b;
                align-items: flex-end;
                padding-top: vw(30);
                .left{
                    display: flex;
                    align-items: center;
                    height: vw(53);
                    line-height: vw(53);
                    img{
                        display: block;
                        width: vw(56);
                        height: vw(44);
                    }
                    span{
                        margin-left: vw(9);
                        font-size: vw(28);
                        color: #000000;
                        font-weight: normal;
                    }
                }
                .right{
                    display: flex;
                    align-items: center;
                    height: vw(53);
                    line-height: vw(53);
                    a{
                        display: inline-block;
                        label{
                            display: inline-block;
                            height: vw(53);
                            display: flex;
                            span{
                                font-size: vw(23);
                                color: #000000;
                                font-weight: normal;
                            }
                            i{
                                margin-left: vw(8);
                                font-size:vw(23);
                                color: #ff9344;
                            }
                        }
                    }
                }
            }
            .pic{
                @include flex_b;
                padding: vw(48) 0 vw(20);
                img{
                    display: block;
                    width: vw(133);
                    height: vw(133);
                }
            }
        }
    }
}